<template>
	<view class="myContainer">
		<view class="header">
			<view class="header-main">
				<view class="header-config">
					<image @click="goSet" class="config-img" src="../../static/icon/config.png"></image>
				</view>
				<view class="header-logo">
					<image class="log-img" :src="userInfo.avatar"></image>
					<!-- <image class="log-img" src="@/static/gg.jpg"></image> -->
					<view>{{userInfo.name}}</view>
				</view>
			</view>
		</view>
		<view class="order">
			<view class="order-title">
				<view>我的订单</view>
				<view @click="goOrder(1)">全部订单 > </view>
			</view>
			<view class="order-list">
				<view class="order-dist">
					<image @click="goOrder(2)" class="order-img" src="../../static/icon/waitpay.png"></image>
					<view class="order-title" >待付款</view>
				</view>
				<view class="order-dist">
					<image @click="goOrder(3)" class="order-img"   src="../../static/icon/waitdelivergoods.png"></image>
					<view class="order-title" >待发货</view>
				</view>
				<view class="order-dist">
					<image @click="goOrder(4)" class="order-img"  src="../../static/icon/waitrecevi.png"></image>
					<view class="order-title" >待收货</view>
				</view>
				<view class="order-dist">
					<image @click="goOrder(5)" class="order-img"  src="../../static/icon/waitdiscuss.png"></image>
					<view class="order-title" >完成</view>
				</view>
				<view class="order-dist">
					<image @click="goOrder(6)" class="order-img"  src="../../static/icon/backmoney.png"></image>
					<view class="order-title" >已退款/取消</view>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="content-list">
				<view class="content-item">
						<view>我的收藏</view>
						<view>></view>
				</view>
				<view class="content-item">
						<view>我的收藏</view>
						<view>></view>
				</view>
				<view class="content-item">
						<view>我的收藏</view>
						<view>></view>
				</view>
				<view class="content-item">
						<view>我的收藏</view>
						<view>></view>
				</view>
				<view class="content-item">
						<view>我的收藏</view>
						<view>></view>
				</view>
				<view class="content-item">
						<view>我的收藏</view>
						<view>></view>
				</view>
				<view class="content-item">
						<view>我的收藏</view>
						<view>></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import shopTemp from '@/common/shoptemp.js'
	export default {
		data() {
			return {
				userInfo:[],
			}
		},
		methods: {
			goSet(){
				uni.navigateTo({
					url:'/pages/userConfig/userConfig'
				})
			},
			goOrder(type){
				uni.navigateTo({
					url:'/pages/order/order?type='+type
				})	
			}
		},
		created() {
			if(shopTemp.getUser().length < 1){
				this.userInfo={'name':'登录'};
			}else{
				this.userInfo = shopTemp.getUser();
				console.log(this.userInfo)
			}
		}
	}
</script>

<style scoped>
.header{
	background: url(../../static/userbackground.jpg) no-repeat;
	width: 100%;
	height: 350rpx;
}
.header-main{
	position: relative;
}
.header-logo{
	position: absolute;
	left: 50%;
	margin-left: -60rpx;
	width: 180rpx;
	height: 180rpx;
}
.config-img{
	width: 50rpx;
	height: 50rpx;
}
.log-img{
	width: 150rpx;
	height: 150rpx;
	border-radius: 50%;
	border: 2rpx solid #66ccff;
	
}
.log-name{
	font-weight: bold;
	color: #FFFFFF;
}
.order-title{
	font-size: 32rpx;
	display: flex;
	justify-content: space-between;
	align-items: auto;
	padding: 12rpx;
}
.order-img{
	width: 100rpx;
	height: 100rpx;
}
.order-list{
	padding: 40rpx;
	display: flex;
}
.order-dist{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.content{
	margin: 20rpx 0;
	padding: 0 20rpx;
}
.content-item{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #66ccff;
}
</style>
